<template>
  <div class="rights">
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>权限管理</el-breadcrumb-item>
          <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-table
      v-loading="isLoading"
      :data="rightList"
      border
      style="width: 100%"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="authName" label="权限名称" width="180">
      </el-table-column>
      <el-table-column prop="path" label="路径"> </el-table-column>
      <el-table-column label="层级">
        <template #default="scope">
          <el-tag
            effect="dark"
            class="ml-2"
            type="success"
            v-if="scope.row.addLevel == '一级'"
            >{{ scope.row.addLevel }}</el-tag
          >
          <el-tag
            effect="dark"
            class="ml-2"
            v-else-if="scope.row.addLevel == '二级'"
            >{{ scope.row.addLevel }}</el-tag
          >
          <el-tag class="ml-2" effect="dark" type="danger" v-else>{{
            scope.row.addLevel
          }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

import { getRightList } from '@/api/rights'

const isLoading = ref(false)
const rightList = ref([])

const initGetRightList = async () => {
  //1 发送请求
  // 2 数据渲染
  let res = await getRightList({ type: 'list ' })
  console.log(res)
  if (res.meta.status == 200) {
    rightList.value = res.data

    formatData(rightList.value)
  }
}

onMounted(() => {
  initGetRightList()
})

// 数据处理
const formatData = (data) => {
  data.forEach((item) => {
    if (item.level == '0') {
      item.addLevel = '一级'
    } else if (item.level == '1') {
      item.addLevel = '二级'
    } else {
      item.addLevel = '三级'
    }
  })
}
</script>

<style lang="scss" scoped></style>
